<template>
  <div class="personal">
    <div class="banxin">
      <div class="nav">
        <Breadcrumb :arr="nav"></Breadcrumb>
      </div>
      <div class="content flex">
        <aside>
          <div class="user">
            <div class="img flex">
              <img :src="$store.state.userinfo.headImg" alt="" />
            </div>
            <span>{{$store.state.userinfo.nickName}}</span>
            <span class="exit" @click="exit()">[ 退出 ]</span>
          </div>
          <div class="list">
            <img src="../assets/images/person/transaction.png" alt="" />
            <h3>交易管理</h3>
            <ul>
              <li @click="$router.push('/personal/user')">
                <span :class="{ active: /\/user/.test($route.path) }"
                  >个人中心</span
                >
              </li>
              <li><span>我的订单</span></li>
              <li @click="$router.push('/personal/cart')">
                <span :class="{ active: /\/cart/.test($route.path) }">
                  购物车</span
                >
              </li>
              <li><span>消息通知</span></li>
              <li><span>鸡腿明细</span></li>
              <li><span>鸡腿攻略</span></li>
            </ul>
          </div>
          <div class="list">
            <img src="../assets/images/person/transaction.png" alt="" />
            <h3>个人信息管理</h3>
            <ul>
              <li>地址管理</li>
              <li>账号安全</li>
            </ul>
          </div>
        </aside>
        <div class="right">
        <router-view></router-view>
      </div>
      </div>
      
    </div>
  </div>
</template>
 
<script>
import Breadcrumb from "../components/common/Breadcrumb.vue";
export default {
  components: { Breadcrumb },
  data() {
    return {
      nav: [
        { path: "/home", text: "首页" },
        { path: "/personal", text: "个人中心", isLast: true },
      ],
    };
  },
  methods:{
      exit(){
          localStorage.removeItem('x-auth-token');
          this.$store.state.userinfo={}
          this.$store.commit('updateTopHeadKey');
      }
  }
};
</script>
 
<style lang = "less" scoped>
.nav {
  margin-bottom: 20px;
}
.content {
  aside {
    width: 160px;
    height: 700px;
    padding: 20px;
    background-color: #e7e7e7;
    .user {
      width: 100%;
      justify-content: center;
      text-align: center;
      padding-bottom: 14px;
      .img {
        width: 100%;
        justify-content: center;
      }
      img {
        width: 102px;
        height: 102px;
        display: block;
        margin-bottom: 16px;
      }
      span {
        &.exit {
          color: #2a5df1;
          cursor: pointer;
          margin-left: 14px;
        }
      }
    }
    .list {
      margin: 20px 0;
      img {
        width: 25px;
        height: 25px;
        vertical-align: middle;
        margin-right: 10px;
      }
      h3 {
        line-height: 40px;
        height: 40px;
        display: inline-block;
      }
      ul {
        li {
          line-height: 34px;
          height: 34px;
          font-size: 14px;
          cursor: pointer;
          .active {
            color: #0a328e;
            border-left: 1px solid #0a328e;
            padding-left: 10px;
          }
        }
      }
    }
  }
  .right{
      flex: 1;
      margin-left: 40px;
  }
}
</style>